<template>
	<view>
		<view style="background-color:#7ACBDC; padding-bottom:100rpx;position: fixed;">
			<view class="canvas-in">
				<canvas v-if="heightIn > 0" :style="{
						width:widthIn+'px', 
						height:heightIn+'px', 
						opacity:0
					}" canvas-id="graceCanvas" class="grace-canvas"></canvas>
			</view>
		</view>
		<gui-popup ref="guipopup" width="580rpx">
			<view class="popup">
				<view class="gui-relative gui-box-shadow bgfff radius15">
					<image :src="imgSrc" mode="widthFix" style="width: 580rpx;border-radius: 15rpx 15rpx 0 0;"></image>
				</view>
				<view class="saveBtn">长按图片保存到相册</view>
			</view>
		</gui-popup>

	</view>
</template>

<script>
	export default {
		name: "poster",
		props: {
			bgImg: {
				type: String,
				default: ''
			},
			synopsis: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				imgSrc: '',
				width: 750, // 画布宽度，单位 rpx
				height: 1000, // 画布高度
				widthIn: 300, // 自动计算转换为 px
				heightIn: 0, //  自动计算转换为 px
				bgColor: '#7ACBDC', // 背景颜色
				imgSrc: null,
				multiple: 1 // 将画布放大 2.0 - 2.9 倍（支持小数，过大app端会出现无法渲染的问题），保存的图片更清晰
			};
		},
		methods: {
			initPoster() {
				uni.showLoading({
					title: 'loading ...'
				});
				// 画布初始化
				this.context = uni.createCanvasContext('graceCanvas');
				this.initSize();
				//延迟1秒等待画布创建
				setTimeout(() => {
					this.draw();
				}, 1000);
			},
			// 画布初始化
			initSize: function() {
				this.widthIn = uni.upx2px(this.width) * this.multiple;
				this.heightIn = uni.upx2px(this.height) * this.multiple;
				console.log(this.widthIn, this.heightIn);
			},
			// 海报绘制代码
			draw: function() {
				// 步骤 01. 绘制背景颜色
				this.step01();
				// 步骤 02. 绘制背景图片（如果需要，条件结构）
				if (this.bgImg != '') {
					this.drawBGIMG(this.bgImg, () => {
						// 步骤 03
						this.step03();
					});
				} else {
					this.step03();
				}
			},
			// 步骤 01 : 绘制背景颜色
			step01: function() {
				this.context.setFillStyle(this.bgColor);
				this.context.fillRect(0, 0, this.widthIn, this.heightIn);
			},
			// 步骤 03 : 
			// 3.1 绘制标题 [ 居中对应 x = 画布的一半 ]
			// 3.2 绘制验证码
			step03: function() {
				// 3.1 绘制标题 [ 居中对应 x = 画布的一半 ]
				this.drawText(
					this.synopsis,
					this.widthIn / 2, 50,
					'#000',
					16 * this.multiple,
					'center'
				);
				// 3.2 绘制二维码
				uni.downloadFile({
					// 请使用自己的后端来实现二维码的生成
					// 如 : php 的 qrcode, 此处换成自己的二维码图片 api 地址
					url: this.vuex_userInfo.qrCode,
					success: (res) => {
						if (res.statusCode === 200) {
							// 绘制二维码
							// x = (画布宽度 - 图片宽度 ) / 2
							var qrCodeWidth = 200 * this.multiple;
							var x = (this.widthIn - qrCodeWidth) / 2;
							this.context.drawImage(res.tempFilePath, x, 100 * this.multiple, qrCodeWidth,
								qrCodeWidth);
								uni.downloadFile({
									// 请使用自己的后端来实现二维码的生成
									// 如 : php 的 qrcode, 此处换成自己的二维码图片 api 地址
									url: this.vuex_userInfo.headPortrait,
									success: (res2) => {
										if (res2.statusCode === 200) {
											// 绘制二维码
											// x = (画布宽度 - 图片宽度 ) / 2
											var headWidth = 200 * this.multiple;
											var x = (this.widthIn - headWidth) / 2;
											this.context.drawImage(res2.tempFilePath, x, 100 * this.multiple, headWidth,
												headWidth);
											// 在最后一步执行 drawIt 完整最终的绘制
											this.drawIt();
										}
									},
									fail: function(e) {
										console.log(e);
									}
								});
						}
					},
					fail: function(e) {
						console.log(e);
					}
				});
			},
			// 绘制文本, 参数 : 文本内容,x,y,颜色,文本大小,横向对齐方式
			drawText: function(content, x, y, color, size, align) {
				this.context.setFontSize(size);
				this.context.setFillStyle(color);
				this.context.setTextAlign(align);
				this.context.fillText(content, x, y);
			},
			// 最终绘制函数
			drawIt: function() {
				this.context.draw(true, () => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: this.widthIn,
							height: this.heightIn,
							destWidth: this.widthIn,
							destHeight: this.heightIn,
							canvasId: 'graceCanvas',
							success: (res) => {
								// 在H5平台下，tempFilePath 为 base64
								console.log(res)
								this.imgSrc = res.tempFilePath;
								this.$refs.guipopup.open()
								uni.hideLoading();
							}
						});
					}, 1000)
				});
			},
			// 绘制图片,参数 : 图片地址, 绘制完成后执行的回调函数
			drawBGIMG: function(img, callback) {
				uni.downloadFile({
					url: img,
					success: (res) => {
						if (res.statusCode == 200) {
							// 绘制
							uni.getImageInfo({
								src: res.tempFilePath,
								success: (res2) => {
									console.log(res2);
									var bgImgHeight = (this.widthIn / res2.width) * res2
									.height;
									console.log(this.widthIn, bgImgHeight);
									this.context.drawImage(res.tempFilePath, 0, 0, this
										.widthIn, bgImgHeight);
									callback();
								}
							});
						}
					}
				});
			},
			// 长按事件
			longpress: function() {
				uni.saveImageToPhotosAlbum({
					filePath: this.imgSrc,
					success: () => {
						console.log('save success');
						uni.showToast({
							title: "图片已经保存到您的相册~"
						})
					}
				});
			}

		}
	}
</script>

<style lang="less">
	.poster {
		width: 750rpx;
		right: -1000px;

		.bgImg {
			width: 750rpx;
		}

		.info {
			padding: 26rpx 33rpx 37rpx 40rpx;

			.left {
				.headImg {
					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}
				}

				.desc {
					margin-top: 24rpx;
				}
			}

			.code {
				image {
					width: 145rpx;
				}
			}

		}
	}

	.popup {
		.saveBtn {
			margin-top: 30rpx;
			height: 80rpx;
			font-size: 26rpx;
		}
	}
</style>